<template>
    <div class="progress">
        <div class="nav" :title="$props.name">
            <div class="title">
                <span class="sort">
                    {{ sort }}
                </span>
                <span class="name">
                    {{ $props.name }}
                </span>
            </div>
            <div class="count">
                {{ $props.value }} m²
            </div>
        </div>
        <div class="line">
            <div class="heighLine" :style="{'width': percentage + '%'}">

            </div>
        </div>
    </div>
</template>

<script>
import {computed} from "vue";

export default {
    name: "zlc-progress",
    props:{
        name:{
            type: String,
            default(){
                return '江西省'
            }
        },
        value:{
            type: Number,
            default(){
                return 10
            }
        },
        count:{
            type: Number,
            default(){
                return 5487
            }
        },
        sort:{
            type: Number,
            default(){
                return 1
            }
        }
    },
    setup(props, content){
        let percentage = computed(() => {
            return (props.value / props.count) * 100
        })
        let sort = computed(() => {
            return 'TOP.' + parseInt(props.sort+1)
        })

        return {
            percentage,
            sort
        }
    }
}
</script>

<style scoped lang="less">
.progress{
  width: 100%;
  min-height: 40px;
    padding-right: 12px;
    box-sizing: border-box;
margin-bottom: 12px;
  .nav{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .title{
      font-size: 18px;
      font-family: Helvetica Neue-Regular, Helvetica Neue;
      font-weight: 500;
      color: #FFFFFF;
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      .sort{
        width: fit-content;
          height: fit-content;
        //height: 22px;
          font-size: 12px;
        background: url("/src/assets/dwgk/sortBcg.png") center center no-repeat;
          background-size: 100% 100%;
          padding: 4px;
          box-sizing: border-box;
          margin-right: 8px;
          //border: 1px solid #fff;
      }
    }
    .count{
        font-size: 20px;
        font-family: DIN;
        font-weight: 500;
        color: #83C9FE;
    }
  }
  .line{
    width: 100%;
    height: 6px;
    position: relative;
    background: rgba(128, 164, 229, .5);
      margin-top: 4px;
    .heighLine{
      position: absolute;
      height: 100%;
        background: linear-gradient(90deg, rgba(79, 141, 255, 1) 50%, rgba(195, 215, 248, 1) 70%);
      border-radius: 0px 12px 12px 0px;
    }
  }
}
</style>
